<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Computer Info</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="<%=basePath%>js/jquery/jquery-1.8.2.min.js"></script>
	<script src="<%=basePath%>js/highcharts/highcharts.js"></script>
	<script src="<%=basePath%>js/highcharts/exporting.js"></script>
	
	<script type="text/javascript">

	var charOut;
	
	function showInfo(){
		var chart;
	    $(document).ready(function() {
	    	var options = { 
	            chart: {
	                renderTo: 'container',
	                type: 'line',
	                marginRight: 130,
	                marginBottom: 25
	            },
	            title: {
	                text: 'Monthly Average Temperature',
	                x: -20 //center
	            },
	            subtitle: {
	                text: 'Source: WorldClimate.com',
	                x: -20
	            },
	            xAxis: {
	                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
	                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
	            },
	            yAxis: {
	                title: {
	                    text: 'Temperature (°C)'
	                },
	                plotLines: [{
	                    value: 0,
	                    width: 1,
	                    color: '#808080'
	                }]
	            },
	            tooltip: {
	                formatter: function() {
	                        return '<b>'+ this.series.name +'</b><br/>'+
	                        this.x +': '+ this.y +'°C';
	                }
	            },
	            legend: {
	                layout: 'vertical',
	                align: 'right',
	                verticalAlign: 'top',
	                x: -10,
	                y: 100,
	                borderWidth: 0
	            },
	            series: [{
	                name: 'Tokyo',
	                data: []
	            	}]
	   		 }

	    	$.ajax({
	    		   type: "POST",
	    		   url: "<%=basePath%>/info",
	    		   success: function(data){
		    		   var myObject = eval('(' + data + ')');
		    		   var info= myObject.info.split(",");

		    		   var dataArray = new Array();
		    		   for(var i=0; i<info.length; i++) {
			    		   dataArray.push(parseFloat(info[i]));
		    		   }
		    		   options.series[0].data = dataArray;
		    		   chart = new Highcharts.Chart(options);
	    		   }
	    		}); 

	     	
	    	//$("#radioId1").click(function() {
				//if(document.getElementById("radioName").checked == true){
					//chart.addSeries({ name: 'Tokyo',  data: [5.9, 4.2, 5.7, 3.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]});
				//}else if(document.getElementById("radioName").checked == false){
					 //seriesList = chart.series;
					 //for(var i=seriesList.length-1;i>=0;i--){
					      //if(seriesList[i].name == 'Tokyo'){
					          //seriesList[i].remove();
					      //}
					  //}
				//}
					
			//});
		     
	    });
	    
		return chart;
	}


	//charOut = showInfo();

	function select() {
		alert(1);
	}


</script>
		
		
			
		
		
		
  </head>
  
  <body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div><br>
    <center>
    	<input type="radio" name="radioName"  checked="checked" onchange="select()"> Tokyo
		<input type="radio" name="radioName"  onchange="select()"> New York  
		<input type="radio" name="radioName"  onchange="select()"> Berlin 
	</center>
  </body>
</html>
